<template>
  <div class="personMessage">
    <h1>姓名：{{ name }}</h1>
    <h1>年龄：{{ age }}</h1>
    <h2 ref="adressElement">地址：{{ adress }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="getPhone">查看联系方式</button>
    <button @click="getElement">获取h2元素</button>
    <hr />
    <h1>汽车信息：</h1>
    <h2>
      汽车的品牌是{{ carMessage.brand }}或者{{ brand }},价格为{{
        carMessage.price
      }}或者{{ price }}万
    </h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeCarBrand">修改汽车品牌</button>
    <button @click="changeCarMessage">修改汽车信息</button>
    <hr />
    <h1>游戏信息：</h1>
    <ul>
      <li v-for="game in gameMessage" :key="game.id">{{ game.name }}</li>
    </ul>
    <button @click="changeFirstGameName">修改第一个游戏名称</button>
    <hr />
    <h1>对象深层次值：</h1>
    <h2>值：{{ testDeepLevel.firstLevel.secondLevel.thirdLevel }}</h2>
    <button @click="changeDeepLevelValue">修改值</button>
    <hr />
    <h1>计算属性姓名：</h1>
    姓：<input type="text" v-model="firstName" /> 名：<input
      type="text"
      v-model="lastName"
    />
    全名：<span>{{ fullName }}</span>
    <button @click="changeFullName">修改名字</button>
    <hr />
    <h1>监视属性：</h1>
    求和：
    <h2>{{ sum }}</h2>
    <button @click="changeSum">点击+1</button>
    <hr />
    <h1>人员信息：</h1>
    <h2>姓名：{{ personMessage.name }}</h2>
    <h2>年龄：{{ personMessage.age }}</h2>
    <h2>
      车：{{ personMessage.car.firstCar }},{{ personMessage.car.secondCar }}
    </h2>
    <button @click="changePersonName">修改人员姓名</button>
    <button @click="changePersonAge">修改人员年龄</button>
    <button @click="changePersonMessage">修改人员信息</button>
    <button @click="changeFirstCar">修改第一辆车</button>
    <button @click="changeSecondCar">修改第二辆车</button>
    <button @click="changeAllCar">修改所有车</button>
    <hr />
    <h1>watchEffect：</h1>
    <h2>水温：{{ waterTemperature }}</h2>
    <h2>水位：{{ waterLevel }}</h2>
    <button @click="changeWaterTemperature">水温+10</button>
    <button @click="changeWaterLevel">水位+10</button>
  </div>
</template>
<script>
export default {
  name: "PracticeBase",
};
</script>
<script setup>
import {
  ref,
  reactive,
  toRef,
  toRefs,
  computed,
  watch,
  watchEffect,
  defineExpose,
} from "vue";
let name = ref("张三");
let age = ref(18);
let phone = "15004435530";
let adress = "吉林省长春市宽城区华大成3期";
let carMessage = reactive({ brand: "奔驰G63", price: 120 });
// let carMessage = ref({ brand: "奔驰G63", price: 120 });
let gameMessage = reactive([
  { id: "001", name: "部落冲突" },
  { id: "002", name: "金铲铲" },
  { id: "003", name: "王者荣耀" },
]);
let testDeepLevel = reactive({
  firstLevel: {
    secondLevel: {
      thirdLevel: "666",
    },
  },
});
let sum = ref(0);
let personMessage = ref({
  name: "刘亮",
  age: 25,
  car: { firstCar: "奔驰", secondCar: "宝马" },
});
let waterTemperature = ref(30);
let waterLevel = ref(10);
let adressElement = ref();
let { brand } = toRefs(carMessage);
let price = toRef(carMessage, "price");
let firstName = ref("");
let lastName = ref("");
// 计算属性只读
// let fullName = computed(() => {
//   return (
//     firstName.value.slice(0, 1).toUpperCase() +
//     firstName.value.slice(1) +
//     "-" +
//     lastName.value
//   );
// });
let fullName = computed({
  get() {
    return (
      firstName.value.slice(0, 1).toUpperCase() +
      firstName.value.slice(1) +
      "-" +
      lastName.value
    );
  },
  set(value) {
    let [newFirstName, newLastName] = value.split("-");
    firstName.value = newFirstName;
    lastName.value = newLastName;
  },
});
// 监视ref定义的基本类型数据
let stopWatch = watch(sum, (newValue, oldValue) => {
  console.log(newValue, oldValue);
  if (newValue > 10) {
    stopWatch();
  }
});
// 监视ref定义的对象类型数据 如果需要监视对象内层数据 可以添加第三个参数
// watch(
//   personMessage,
//   (newValue, oldValue) => {
//     console.log(newValue, oldValue);
//   },
//   { deep: true }
// );
// 监视reactive定义的对象类型数据 默认开启了深度监视（隐式创建深度监视）
watch(testDeepLevel, (newValue, oldValue) => {
  console.log(newValue, oldValue);
});
// 监视reactive或ref定义的对象类型数据中的某个属性
watch(
  [() => personMessage.value.name, () => personMessage.value.car.firstCar],
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  },
  {
    deep: false,
  }
);

watchEffect(() => {
  if (waterLevel.value > 80 && waterTemperature.value > 50) {
    console.log("向服务器发送请求");
  }
});
function getElement() {
  console.log(adressElement.value);
}
function changeWaterTemperature() {
  debugger
  waterTemperature.value += 10;
}
function changeWaterLevel() {
  waterLevel.value += 10;
}
function changePersonName() {
  personMessage.value.name += "~";
}
function changePersonAge() {
  personMessage.value.age += 1;
}
function changePersonMessage() {
  personMessage.value = { name: "王五", age: 50 };
}
function changeFirstCar() {
  personMessage.value.car.firstCar = "速腾";
}
function changeSecondCar() {
  personMessage.value.car.secondCar = "宝来";
}
function changeAllCar() {
  personMessage.value.car = { firstCar: "CRV", secondCar: "雅阁" };
}
function changeSum() {
  sum.value += 1;
}
function changeFullName() {
  fullName.value = "li-si";
}
function changeName() {
  name.value = "里斯";
}
function changeAge() {
  age.value += 1;
}
function getPhone() {
  alert(phone);
}
function changeCarPrice() {
  // carMessage.price += 10;
  price.value += "~";
}
function changeCarBrand() {
  // carMessage.brand = "速腾";
  brand.value = "宝马";
}
function changeCarMessage() {
  Object.assign(carMessage, { brand: "宝来", price: 11 });
}
function changeFirstGameName() {
  gameMessage[0].name = "英雄联盟";
}
function changeDeepLevelValue() {
  testDeepLevel.firstLevel.secondLevel.thirdLevel = "999";
}
// 在组件上绑定ref获取时 父组件想要子组件的一些数据 子组件需要调用此函数把需要的传递出去
defineExpose({ name, age, phone });
</script>
<style scoped>
.personMessage {
  background-color: rgb(218, 134, 23);
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>
